1.jQuery开发步骤

 　　jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库。

　　（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

　　（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....

2.js对象转成jQuery对象

　　语法：$(js对象)---->jQuery对象

　　例如：$(divElement)---->$div

3.jQuery对象的三种基本定位方式

　　（A）通过ID属性：$("#id属性值")

　　（B）通过标签名：$("标签名")

　　（C）通过CLASS属性：$(".样式名")

4.jQuery9类选择器

基本选择器

//查找id的元素个数alert($("#div1ID").size());//查找div元素个数alert($("div").length);//查找class元素个数alert($(".myClass").size());//查找div，span，p的个数alert($("div,span,p").size());//查找所有id，class，p的元素个数alert($("#div1ID,.myClass,p").size());

层次选择器

//找到form里面的inputalert($("form input").size());//找到form里所有子级input元素alert($("form>input").size());//找到form同级的第一个input的值alert($("form+input").val());//找到form同级的input元素个数，从form往后找alert($("form~input").length);

基本加强型选择器

//得到第一个lialert($("ul li:first").text());//得到最后一个lialert($("ul li:last").text());//得到第3个li，从0开始计数alert($("ul li:eq(2)").text());//得到偶数的tralert($("table tr:even").text());//得到奇数的tralert($("table tr:odd").text());//查找表格中索引号大于0的tralert($("table tr:gt(0)").size());//查找表格中索引号小于4的tralert($("table tr:lt(4)").size());//给h1\h2\h3标签加上红色背景，蓝色文字，header只用于h1、h2、h3$(":header").css("background-color","red").css("color","blue");//查找未选中的input为checkbox的元素个数alert($(":checkbox:not(:checked)").size());

内容选择器

//查找所有包含文本"John"的div元素的个数alert($("div:contains('John')").size());//查找所有p元素为空的元素个数，不包含
元素alert($("p:empty").size());//给所有包含p元素的div元素添加一个myClass样式$("div:has(p)").addClass("myClass");//查找所有含有子元素或者文本的p元素个数,即p为父元素，包含
元素alert($("p:parent").size());

可见性选择器

//1)查找隐藏的tr元素的个数alert($("table tr:hidden").size());//2)查找所有可见的tr元素的个数alert($("table tr:visible").size());

属性选择器

//查找所有含有id属性的div元素个数alert($("div[id]").size());//查找所有name属性是newsletter的input元素，并将其选中$("input[name='newsletter']").attr("checked","checked");//查找所有name属性不是newsletter的input元素，并将其选中$("input[name!='newsletter']").attr("checked","checked");//查找所有name属性以'news'开头的input元素，并将其选中$("input[name^='news']").attr("checked","checked");//查找所有name属性以'letter'结尾的input元素，并将其选中$("input[name$='letter']").attr("checked","checked");//查找所有name属性包含'news'的input元素，并将其选中$("input[name*='news']").attr("checked","checked");//找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中$("input[id][name$='letter']").attr("checked","checked");

子元素选择器

//迭代[each]每个ul中第1个li元素中的内容,索引从1开始$("ul li:first-child").each(function () {    //alert(this.text());传统js对象不能调用text    alert($(this).text());})//迭代每个ul中最后1个li元素中的内容,索引从1开始$("ul li:last-child").each(function () {    //alert(this.text());传统对象不能调用text    alert($(this).text());})//迭代每个ul中第2个li元素中的内容,索引从1开始$("ul li:nth-child(2)").each(function () {    alert($(this).text());})//在ul中查找是唯一子元素的li元素的内容$("ul li:only-child").each(function () {    alert($(this).text());})

表单选择器

//查找所有input元素的个数//alert( $("input").size() );//10，找input标签alert( $(":input").size() );//13，找input标签和select/textarea/button//查找所有文本框的个数alert( $(":text").size() );//查找所有密码框的个数alert( $(":password").size() );//查找所有单选按钮的个数alert( $(":radio").size() );//查找所有复选框的个数alert( $(":checkbox").size() );//查找所有提交按钮的个数，包括标签alert( $(":submit").size() );//匹配所有图像域的个数alert( $(":image").size() );//查找所有重置按钮的个数alert( $(":reset").size() );//查找所有普通按钮的个数，包括input的type=buttonalert( $(":button").size() );//查找所有文件域的个数alert( $(":file").size() );//查找所有input元素为隐藏域的个数alert( $(":input:hidden").size() );

表单对象属性选择器

//查找所有可用的input元素的个数alert($("input:enabled").size());//查找所有不可用的input元素的个数alert( $("input:disabled").size() );//查找所有选中的复选框元素的个数alert( $(":checkbox:checked").size() );//查找所有未选中的复选框元素的个数alert( $(":checkbox:NOT(:checked)").size() );//查找所有选中的选项元素的个数alert( $("select option:selected").size() );//查找id为provinceID的select的未选中的选项个数alert( $("#provinceID option:NOT(:selected)").size() );

5.jQuery方法

DOM标准规则下的jQuery常用API

//DIV标签插入到UL标签之后(父子关系)$("ul").append($("div"));//DIV标签插入到UL标签之前(父子关系)$("ul").prepend($("div"));//DIV标签插入到UL标签之后(兄弟关系)$("ul").after($("div"));//DIV标签插入到UL标签之前(兄弟关系)$("ul").before($("div"));//取得form里第一个input元素的type属性//alert($("form input:first").attr("type"));//设置form里最后一个input元素的为只读文本框$("form input:last").attr("readonly","true");//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中/*js方式*/ var divElement = document.createElement("div"); divElement.innerHTML = "哈哈哈"; divElement.setAttribute("id","2015"); divElement.id = "2015"; document.body.appendChild(divElement);//jquery方式var $div = $("
     
      哈哈哈哈
     
")$("body").append($div)$(document.body).append($div);//删除ID为secondID的LI元素$("#secondID").remove();//删除第一个ul中的所有LI元素$("#a li").remove();//删除第二个UL元素$("#b").remove();//复制原input元素，添加到原input元素后，与其同级var $old = $(":button");var $new = $old.clone();$new.val("新按钮");$old.after($new);//为原input元素动态添加单击事件，且复制原input元素，var $old = $(":button");$old.click(function (){    alert("动态事件");})//添加到原input元素后，与其同级，且和原按钮有一样的行为var $old = $(":button");var $new = $old.clone(true);//复制行为和样式$new.val("新按钮");$old.after($new);//双击
     
      中的文本，用文本框替换文本$("div").dblclick( function(){    var $text = $("
      ");    //文本框替代div标签    $(this).replaceWith( $text );} );//为
      
       元素添加属性border/align/width$("table").attr("border","2").attr("align","right").attr("width","60%");//将
      
       元素的align属性删除$("table").removeAttr("align");
     

添加样式

//为无样式的DIV添加样式$("div:first").addClass("myClass");//为有样式的DIV删除样式$("div:last").removeClass("myClass");//切换样式，即有样式的变成无样式，无样式的变成有样式$("div").toggleClass("myClass");//最后一个DIV是否有样式var flag = $("div:last").hasClass("myClass");alert(flag?"有样式":"无样式");//获取图片的坐标var offset = $("img").offset();var x = offset.left;var y = offset.top;alert(x);alert(y);//设置图片的坐标$("img").offset({    top:100,    left:200});//获取图片的宽高var w = $("img").width();var h = $("img").height();alert(w+":"+h);//设置图片的宽高$("img").width(500);$("img").height(600);//取得div元素的直接子元素内容，不含后代元素//
     
      //    
      //        Hello Again//        //            Bold//        //    //
     
alert($("div").children().text());//Hello Again Bold//取得div元素的下一个同级的兄弟元素内容alert($("div").next().text());//取得div元素的上一个同级的兄弟元素内容alert($("div").prev().text());//依次取得div元素同级的所有兄弟中p元素的内容$("div").siblings("p").each(function(){    alert($(this).text());});

动画

//图片隐蔽$("img").hide(5000,function(){    alert("隐藏完毕");});//休息3秒window.setTimeout(function(){    $("img").show(5000);},3000);//淡出隐蔽图片$("img").fadeOut(3000);//淡入显示图片$("img").fadeIn(3000);$(":button").click(function(){    //div标标上下移动    $("div").slideToggle(100);});

6.jQuery事件

/*使用JS方式加载a()和b()二个方法，后面的覆盖前面的*/        window.onload = function(){            a();        }        window.onload = function(){            b();        }        /*使用jQuery最简方式加载a()和b()二个方法，不会覆盖两个都会执行*/        $(function(){            a();        });        $(function(){            b();        });        //当标签触发onchange事件,显示选中的value和innerHTML属性的值        $("#city").change( function(){             var $option = $("#city option:selected");            var value = $option.val();            var text = $option.text();            alert(value+":"+text);        } );        //加载页面时获取光标并选中所有文字                $(function(){                    //定位光标                    $(":text").focus();                    //选中字体                    $(":text").select();                })            //当按键弹起时，显示所按键的unicode码        $(function(){        //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象            $(document).keyup(function(){            //获取按钮的unicode编码            var code = event.keyCode;             alert(code);            });        });        //显示鼠标移动时的X和Y座标        $(function(){            $(document).mousemove(function(){                var x = event.clientX;                var y = event.clientY;                $("#xID").val(x);                $("#yID").val(y);            });                });        //鼠标移到某行上，某行背景变色        $("table tr").mouseover(function(){            $(this).css("background-color","activecaption");        });                    //鼠标移出某行，某行还原        $("table tr").mouseout(function(){            $(this).css("background-color","white");        });                //鼠标移到某图片上，为图片加边框        $("img").mouseover(function(){            $(this).css("border-color","red");        });                //鼠标移出图片，图片还原        $("img").mouseout(function(){            $(this).css("border-color","white");        });                    //浏览器加载页面时，文本框样式改变        $(function(){            $("table :text").addClass("myClass");        });        //光标移上去时，清空文本框内容        $("table :text").focus(                function(){                    $(this).val("");                    $(this).removeClass("myClass");                }        );        //当文本框失去焦点时，恢复原来的样式        $("table :text").blur(function(){            var content = $(this).val();            if($.trim(content).length == 0)            {                $(this).val("输入用户名");                $(this).addClass("myClass");            }        })

7.jQuery中使用AJAX

　　简单获取时间，jquery对象调用load，直接将返回的数据插入到jquery对象里面。对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交，如果请求体有参数发送的话，load方法采用POST方式提交。

　　简单形式：jQuery对象.load(url)

           返回结果自动添加到jQuery对象代表的标签中间

           如果是Servlet的话，采用的是GET方式

　　　　如果是Servlet的话，采用的是GET方式。

      复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

           sendData = {"user.name":"jack","user.pass":"123"};

           以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

function getMsg(){    var url = "${pageContext.request.contextPath}/ajax_time?time="+new Date().getTime();    // 参数一：url    // 参数二：以post方式发送的JSON格式数据    // 参数三：回调函数    $("#timeSpan").load(url,null,function(backData,textStatus,ajax){        //回调函数的三个参数        //返回的数据，它是js对象        alert(backData);        //返回状态的文本描述，例如success，error        alert(textStatus);        //ajax对象        alert(ajax.responseText);//是一个字符串    });}

验证用户是否存在，使用$.post方法。如果页面有太多数据要发送，不需要一一写json格式的发送数据，只需要调用$(jquery对象).serialize()方法，它会自动将对象中有name属性的对象自动转换为json格式的数据。

function checkEmp(input){    var empName=$(input).val();    //去掉空格    empName = $.trim(empName);    if(empName.length == 0)    return;    var url="${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime();    //手动写json对象    var sendData = {        empName:empName    };    //jquery自动生成json对象    //var sendData = $("form").serialize();    alert(sendData);    $.post(url,sendData, function (backData) {        //创建img标签        var $img = $("");        //清空span，然后添加图片        $("span").text("");        $("span").append($img);    })}

二级联动：

function getCity(province){    var index = province.selectedIndex;    if(index == 0)    return;    var $province = $(province[index]).text();    var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();    var sendData = {        province:$province    }    $.post(url,sendData,function(xml){        //清空city下拉菜单        $("#cityID option:gt(0)").remove();        //xml是js对象        var $xml = $(xml).find("city");        $xml.each(function(){            //text可以访问xml标签            var option = $(""+$(this).text()+"");            //添加到下拉菜单            $("#cityID").append(option);        });    })}

$.ajax方式

function getCity(province){    var index = province.selectedIndex;    if(index == 0)        return;    var $province = $(province[index]).text();    var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();    var sendData = {        province:$province    }    $.ajax({        type:"POST",        url:url,        data:sendData,        success:function(xml){        //清空city下拉菜单        $("#cityID option:gt(0)").remove();        //xml是js对象        var $xml = $(xml).find("city");        $xml.each(function(){            //text可以访问xml标签            var option = $(""+$(this).text()+"");            //添加到下拉菜单            $("#cityID").append(option);        });    }});}

 获取json数据

action方法

public class ProvinceCityAction extends ActionSupport{    private String province;    public void setProvince(String province) {        this.province = province;        //System.out.println("注入" + province);    }    //根据省份查询城市    public String findCityByProvince() throws Exception {        setCity = new LinkedHashSet
     
      ();        if("湖南".equals(province)){            setCity.add("长沙");            setCity.add("株洲");        }else if("广东".equals(province)){            setCity.add("广州");            setCity.add("中山");            setCity.add("佛山");        }        return SUCCESS;    }    private Set
      
        setCity;    public Set
       
         getSetCity() {        return setCity;    }}
       
      
     

js

$("#province").change( function(){            //清空原城市下拉框中的内容，除第一项外            $("#city option:gt(0)").remove();            //获取选中的省份            var province = $("#province option:selected").text();            //如果选中的不是"选择省份"            if("选择省份"!=province){                $.ajax( {                    type    : "POST",                    url     : "${pageContext.request.contextPath}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),                    data    : {
    "province":province},                    success : function(backDate,textStatus,ajax){
                                    //解析json文本                                var array = backDate.setCity;                                  var size = array.length;                                  for(var i=0;i
     
      "+city+"");                                      $("#city").append($option);                                  }                              }                } );            }        } );